import Taro from "@tarojs/taro";
import { memo, useEffect, useState } from "react";
import { ScrollView, Text, View, Image, Input } from "@tarojs/components";
import { Popup, Button, Overlay, NavBar } from "@nutui/nutui-react-taro";
import { login } from "../../api/user";
import { setStore, getStore } from "../../utils/localStore";
import { ArrowLeft } from '@nutui/icons-react-taro'

import { iconRightBlack, iconRightGray } from "../../assets/files";
import useNavInfo from "../../hooks/useNavInfo";
import "./index.scss";

const NavTab = (props) => {
  const { tabCur = 1, tabList, onChangeCallback, style,customBack } = props

  // const [tabCur, setTabCur] = useState(defaultValue)
  const { statusBarHeight } = useNavInfo();

  function _handleback() {
    customBack ? customBack() :
    Taro.navigateBack({
      delta: 1
    })
  }

  const tabChange = (cur) => {
    // setTabCur(cur)
    onChangeCallback && onChangeCallback(cur)
  }
  return (
    <View className="inputWrap" style={style}>
      <NavBar
        fixed
        style={{ backgroundColor: "#fff", height: statusBarHeight + 50, paddingTop: 24 }}
        back={
          <>
            <ArrowLeft style={{ marginTop: 24 }} />
          </>
        }
        onBackClick={(e) => _handleback()}
      >
        <View className="customTabWrap">
          {
            tabList?.map((v, i) => {
              return (
                <View
                  style={{
                    backgroundColor: tabCur === v.id ? '#4F84F6' : '#fff',
                    borderTopLeftRadius: v.id === 1 && tabCur === v.id ? 4 : 0,
                    borderBottomLeftRadius: v.id === 1 && tabCur === v.id ? 4 : 0,

                    borderTopRightRadius: v.id === 2 && tabCur === v.id ? 4 : 0,
                    borderBottomRightRadius: v.id === 2 && tabCur === v.id ? 4 : 0,
                  }}
                  onclick={() => tabChange(v.id)} className="tabItem">
                  <Text style={{ color: tabCur === v.id ? '#fff' : '#111111' }}>{v.name}</Text>
                </View>
              )

            })
          }
        </View>
      </NavBar>
    </View>
  );
}

export default NavTab;
